<template>
  <div class="">
    <base-form :form-data="searchData" :fields="searchForm" :inline="true" :form-data.sync="formData">
      <template #footer-button>
        <GpBaseTableToolbar  @search="search" :syncDataUrl="syncDataUrl" :show-search-button="showSearchButton">
          <template #before>
            <slot name="toolbarBefore"></slot>
          </template>
          <template #after>
            <slot name="toolbarAfter"></slot>
          </template>
        </GpBaseTableToolbar>
      </template>
    </base-form>
    <el-table
        :data="list"
        size="small"
        v-loading="loading"
        height="550px"
        ref="table"
        @selection-change="handleSelectionChange"
        border
        style="width: 100%">
      <el-table-column type="selection" fixed="left" v-if="type === 'checkbox'" ></el-table-column>
      <el-table-column type="radio" fixed="left" v-if="type === 'radio'" ></el-table-column>
      <el-table-column type="index" fixed="left"></el-table-column>
      <template v-for="colum in tableColumns">
        <el-table-column is="el-table-column"
            v-if="colum.type !== 'action'"
            :label="colum.title"
            :align="colum.align"
            :prop="colum.key"
            v-on="colum.on"
            v-bind="colum.attrs"
        >
          <template v-slot:default="{row,$index}" >
            <slot :name="colum.slot" :row="row" :index="$index" v-if="colum.slot"></slot>
            <component :is="colum.tableIs ? colum.tableIs : 'span'" :value="row[colum.key]" v-else :unit="colum.unit">{{row[colum.key]}}</component>
          </template>

        </el-table-column>
        <el-table-column v-else type="action" fixed="right"  :align="colum.align":label="colum.title" v-bind="colum.attrs">
          <template v-slot:default="{row,$index}" >
            <GpBaseTableAction
                :fields="formColumns"
                :column="colum"
                :primary-id="row[primaryKey]"
                :index="$index"
                :row="row"
                :url="url"
            ></GpBaseTableAction>
          </template>
        </el-table-column>
      </template>

    </el-table>
    <el-pagination
        class="mar-tb-10px"
        align="right"
        size="small"
        background
        layout="prev, pager, next"
        :current-page="pageNumber"
        :page-size="pageSize"
        @current-change="nexPage"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import http from "network/http";
import commons from "utils/commons";
import GpBaseTableAction from "./GpBaseTableAction"

export default {
  name: "GpBaseTable",
  components:{GpBaseTableAction} ,
  props: {
    showSearchButton: {
      type: Boolean ,
      default: true
    } ,
    formData: {
      type: Object ,
      default(){
        return {}
      }
    },
    mountedLoad: {
      type:Boolean ,
      default: true
    } ,
    primaryKey: {
      type: String ,
      required: true
    },
    type: {
      type: String ,
      default: "checkbox"
    },
    url: {
      type: String ,
      required: true
    },
    syncDataUrl: {
      type: String ,
      required: true
    },
    method:{
      type: String ,
      default: 'POST'
    },
    params: {
      type: Function ,
      default(){
        return [] ;
      }
    } ,
    columns:{
      type: Array ,
      required: true
    }
  },
  data(){
    return {
      list: [] ,
      total: 0 ,
      pageNumber: 1 ,
      pageSize: 12 ,
      searchData:{},
      primaryKeys: [] ,
      selectedData: [] ,
      loading: false
    }
  },
  mounted(){
    if(this.mountedLoad){
      this.queryListByPage() ;
    }
  },
  computed:{
    formColumns(){
      return this.columns.filter((col)=>{
        return col.form === true
      })
    },
    tableColumns() {
      return this.columns.filter((col)=>{
        return col.table !== false
      })
    },
    searchForm(){
      return this.columns.filter((col)=>{
        return col.search === true
      })
    },

  },
  methods:{
    handleSelectionChange(val){
      this.selectedData = val ;
    },
    search(){
      if (this.$listeners.search) {
        this.$emit("search");
      } else {
        this.pageNumber = 1
        this.queryListByPage()
      }
    },
    nexPage(page){
      this.pageNumber = page ;
      this.queryListByPage()
    },
    buildQueryItem(){
     return this.searchForm.map(item=>{
        return {
          key: item.key ,
          op: item.op || 'EQ' ,
          value: this.formData[item.key]
        }
      }).filter(item=>item.value)
    },
    queryListByPage(){
      let params = {
        items: this.params() || [],
        page: this.pageNumber ,
        pageSize: this.pageSize
      }
      let items = this.buildQueryItem();
      params.items.push(...items)
      params.items = params.items.filter((item)=>{
          return ["DESC","ASC"].includes(item.op) || !commons.isEmpty(item.value)
      } )
      this.loading = true
      http.post(`${this.url}`,params).then(res=>{
        this.list = res.data.rows ;
         this.total = res.data.total
      }).finally(()=>{
        this.loading = false
      })
    },
    getComponent(){

    },
    getSelectionData(){
      return this.selectedData
    },
    handlerQueryListByPage(queryItems=[]) {
      let params = {
        items: queryItems,
        page: this.pageNumber,
        pageSize: this.pageSize
      }
      http.post(`${this.url}/listByPage`,params).then(res=>{
        this.list = res.data.rows ;
        this.total = res.data.total
      })
    }
  }
}
</script>
<style scoped>

</style>
